import React from 'react';
import CardItem from './Item';
import { Resize } from "@/components";
import styles from "../style.moudle.scss";
import { Spin, Empty, Pagination } from 'antd';
import { Pagination as _Pagination } from '@/types'

type Props = {
  dataSource: any[];
  loading: boolean;
  pagination: _Pagination;
  onPageChange(page: number, pageSize?: number): void;
}

class Cards extends React.Component<Props> {
  static defaultProps = {
    dataSource: [],
    loading: false,
    pagination: {},
    onPageChange: () => null
  }

  private renderContent = (width: number) => {
    const { dataSource } = this.props;
    return (
      <div className={styles.image_container}>
        {dataSource.map((item, i: number) => {
          return (
            <CardItem
              item={item}
              itemIndex={i}
              key={item._id}
              containerWidth={width}
            />
          )
        })}
      </div>
    )
  }

  render() {
    const {
      loading,
      dataSource,
      pagination,
      onPageChange
    } = this.props;
    const { page, total, limit } = pagination;
    return (
      <Spin spinning={loading}>
        {dataSource.length ? (
          <React.Fragment>
            <Resize>
              {(width: number) => (
                this.renderContent(width)
              )}
            </Resize>
            <Pagination
              total={total}
              current={page}
              pageSize={limit}
              onChange={onPageChange}
              className={styles.pagination}
            />
          </React.Fragment>
        ) : <Empty description="暂无数据"/>}
      </Spin>
    )
  }
}

export default Cards;
